<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Tester</title>
</head>
<body>
<h1>SSE Tester</h1>
<input type="text" id="sse-url" placeholder="Enter SSE URL">
<button onclick="startSSERequest()">Submit</button>
<div id="sse-output"></div>

<script>
    function startSSERequest() {
        const sseUrl = document.getElementById('sse-url').value;
        const sseOutput = document.getElementById('sse-output');

        if (sseUrl) {
            const eventSource = new EventSource(sseUrl);

            eventSource.addEventListener('message', function(event) {
                const escapedData = escapeHTML(event.data);
                sseOutput.innerHTML += `${escapedData}`;
            });

            eventSource.addEventListener('error', function(event) {
                sseOutput.innerHTML += `<p>Error: ${escapeHTML(event.type + '-' + event.data)}</p>`;
                eventSource.close();
            });
        } else {
            sseOutput.innerHTML = '<p>Please enter an SSE URL.</p>';
        }
    }

    function escapeHTML(unsafe) {
        return unsafe.replace(/&/g, '&amp;')
                     .replace(/</g, '&lt;')
                     .replace(/>/g, '&gt;')
                     .replace(/"/g, '&quot;')
                     .replace(/'/g, '&#039;');
    }
</script>
</body>
</html>